body {
  -webkit-overflow-scrolling: touch;
}
ul,
li {
  list-style: none;
}

@indexedList: rmc-indexed-list;
.@{indexedList} {
  // position: relative;
  &-quick-search-bar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1999;
    text-align: center;
    font-size: 12px;
    li {
      padding: 5px 10px;
    }
    &-over {
      background-color: rgba(128, 128, 128, 0.2);
    }
  }
  // quickSearchBar is moving, maybe need disable body(or parent scroll element)'s overflow
  &-qsb-moving {
    overflow: hidden;
  }
  &-qsindicator {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -30px auto auto -60px;
    width: 120px;
    height: 60px;
    background: transparent;
    opacity: 0.7;
    color: #0af;
    font-size: 40px;
    border-radius: 60px;
    z-index: 1999;
    text-align: center;
    line-height: 60px;
    &-hide {
      display: none;
    }
  }
}

@pull-to-refresh: rmc-pull-to-refresh;
.@{pull-to-refresh} {
  &-content {
    &-wrapper {
      overflow: hidden;
    }

    transform-origin: left top 0px;
  }

  &-indicator {
    color: grey;
    text-align: center;
    height: 25px;
    line-height: 25px;
  }

  &-down .@{pull-to-refresh}-indicator {
    margin-top: -25px;
  }

  &-up .@{pull-to-refresh}-indicator {
    margin-bottom: -25px;
  }

  &-transition {
    transition: transform 0.3s;
  }
}

@refresh-control: zscroller-refresh-control;
.@{refresh-control} {
  &-indicator {
    color: grey;
    text-align: center;
    height: 25px;
    line-height: 25px;
    margin-top: -25px;
    &-icon-wrapper {
      display: block;
    }
    &-loading-wrapper {
      display: none;
    }
  }
  &-loading {
    .@{refresh-control}-indicator {
      &-icon-wrapper {
        display: none;
      }
      &-loading-wrapper {
        display: block;
      }
    }
  }

  &-pull {
    display: block;
  }
  &-release {
    display: none;
  }
  &-active &-pull {
    display: none;
  }
  &-active &-release {
    display: block;
  }
  &-deactive {
    .@{refresh-control}-indicator {
      &-loading-wrapper {
        display: none;
      }
    }
  }
}

.zscroller {
  &-scrollbar-y {
    position: absolute;
    z-index: 9999;
    width: 7px;
    bottom: 2px;
    top: 2px;
    right: 1px;
    overflow: hidden;
    transform: translateZ(0px);
    transition-property: opacity;
    transition-duration: 250ms;
    opacity: 0;
  }

  &-indicator-y {
    box-sizing: border-box;
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.901961);
    border-radius: 3px;
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.498039);
  }

  &-scrollbar-x {
    position: absolute;
    z-index: 9999;
    height: 7px;
    left: 2px;
    right: 2px;
    bottom: 1px;
    overflow: hidden;
    transform: translateZ(0px);
    transition-property: opacity;
    transition-duration: 250ms;
    opacity: 0;
  }

  &-indicator-x {
    box-sizing: border-box;
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.901961);
    border-radius: 3px;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.498039);
  }
}
